{% extends "base.html" %}

{% block title %}联系我 - 个人博客{% endblock %}

{% block content %}
<div class="contact-page">
    <div class="contact-header">
        <h1>联系我</h1>
        <p>有什么想法或建议？欢迎与我交流！</p>
    </div>
    
    <div class="contact-content">
        <div class="contact-form-section">
            <h2>发送消息</h2>
            <form id="contact-form" class="contact-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name" class="form-label">姓名 *</label>
                        <input type="text" id="name" name="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">邮箱 *</label>
                        <input type="email" id="email" name="email" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="subject" class="form-label">主题</label>
                    <input type="text" id="subject" name="subject" class="form-control">
                </div>
                
                <div class="form-group">
                    <label for="message" class="form-label">消息内容 *</label>
                    <textarea id="message" name="message" class="form-control" rows="6" required placeholder="请在这里输入您的消息..."></textarea>
                </div>
                
                <button type="submit" class="btn btn-primary btn-submit">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                    </svg>
                    发送消息
                </button>
            </form>
        </div>
        
        <div class="contact-info-section">
            <h2>其他联系方式</h2>
            <div class="contact-methods">
                <div class="contact-method">
                    <div class="method-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                        </svg>
                    </div>
                    <div class="method-content">
                        <h3>邮箱</h3>
                        <p>contact@example.com</p>
                        <a href="mailto:contact@example.com">发送邮件</a>
                    </div>
                </div>
                
                <div class="contact-method">
                    <div class="method-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                    </div>
                    <div class="method-content">
                        <h3>GitHub</h3>
                        <p>@yourusername</p>
                        <a href="https://github.com/yourusername" target="_blank" rel="noopener">访问主页</a>
                    </div>
                </div>
                
                <div class="contact-method">
                    <div class="method-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                        </svg>
                    </div>
                    <div class="method-content">
                        <h3>Twitter</h3>
                        <p>@yourusername</p>
                        <a href="https://twitter.com/yourusername" target="_blank" rel="noopener">关注我</a>
                    </div>
                </div>
                
                <div class="contact-method">
                    <div class="method-icon">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                    </div>
                    <div class="method-content">
                        <h3>个人网站</h3>
                        <p>www.yourwebsite.com</p>
                        <a href="https://www.yourwebsite.com" target="_blank" rel="noopener">访问网站</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
/* 联系页面样式 - 保留自定义布局和动画效果 */
.contact-page {
    @apply max-w-5xl mx-auto py-10 px-5;
}

.contact-header {
    @apply text-center mb-12 py-10 bg-white rounded-xl shadow-sm;
}

.contact-header h1 {
    @apply text-4xl font-bold text-slate-700 mb-4;
}

.contact-header p {
    @apply text-lg text-gray-500;
}

.contact-content {
    @apply grid gap-10;
    grid-template-columns: 2fr 1fr;
}

.contact-form-section {
    @apply bg-white rounded-xl shadow-sm p-10;
}

.contact-form-section h2 {
    @apply text-2xl font-semibold text-slate-700 mb-8 pb-4 border-b-2 border-blue-500;
}

.contact-form {
    @apply flex flex-col gap-5;
}

.form-row {
    @apply grid gap-5;
    grid-template-columns: 1fr 1fr;
}

.form-group {
    @apply flex flex-col;
}

.form-label {
    @apply font-medium text-slate-700 mb-2 text-sm;
}

.form-control {
    @apply px-4 py-3 border-2 border-gray-200 rounded-lg text-sm transition-all duration-300 bg-white;
}

.form-control:focus {
    @apply outline-none border-blue-500;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-control::placeholder {
    @apply text-gray-400;
}

textarea.form-control {
    @apply resize-y min-h-32 font-inherit;
}

.btn-submit {
    @apply self-start px-8 py-3 text-base font-semibold flex items-center gap-2 transition-all duration-300;
}

.btn-submit:hover {
    @apply transform -translate-y-0.5;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.contact-info-section {
    @apply bg-white rounded-xl shadow-sm p-10 h-fit;
}

.contact-info-section h2 {
    @apply text-2xl font-semibold text-slate-700 mb-8 pb-4 border-b-2 border-blue-500;
}

.contact-methods {
    @apply flex flex-col gap-6;
}

.contact-method {
    @apply flex items-start gap-4 p-5 bg-gray-50 rounded-lg transition-all duration-300;
}

.contact-method:hover {
    @apply bg-gray-100 transform -translate-y-0.5;
}

.method-icon {
    @apply w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white flex-shrink-0;
}

.method-icon svg {
    @apply w-5 h-5;
}

.method-content h3 {
    @apply text-base font-semibold text-slate-700 mb-1;
}

.method-content p {
    @apply text-gray-500 text-sm mb-2;
}

.method-content a {
    @apply text-blue-500 no-underline text-sm font-medium transition-colors duration-300;
}

.method-content a:hover {
    @apply text-blue-600 underline;
}

@media (max-width: 768px) {
    .contact-content {
        @apply grid-cols-1 gap-8;
    }
    
    .form-row {
        @apply grid-cols-1;
    }
    
    .contact-page {
        @apply py-5 px-4;
    }
    
    .contact-header {
        @apply py-8;
    }
    
    .contact-header h1 {
        @apply text-3xl;
    }
    
    .contact-form-section,
    .contact-info-section {
        @apply p-6;
    }
}
</style>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contact-form');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 获取表单数据
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            // 验证必填字段
            const requiredFields = ['name', 'email', 'message'];
            let isValid = true;
            
            requiredFields.forEach(field => {
                const input = this.querySelector(`[name="${field}"]`);
                if (!input.value.trim()) {
                    input.style.borderColor = '#e74c3c';
                    isValid = false;
                } else {
                    input.style.borderColor = '#e1e8ed';
                }
            });
            
            if (!isValid) {
                showMessage('请填写所有必填字段', 'error');
                return;
            }
            
            // 显示加载状态
            const submitBtn = this.querySelector('.btn-submit');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg> 发送中...';
            submitBtn.disabled = true;
            
            // 模拟发送（静态页面演示）
            setTimeout(() => {
                showMessage('消息发送成功！我会尽快回复您。', 'success');
                this.reset();
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }, 2000);
        });
    }
});
</script>
{% endblock %}
